Avatar en comentarios

Hace unos días algunos despertamos con la última novedad, el avatar en los comentarios. Lo de última es porque somos los últimos en tener avatar, lo de novedad porque nadie lo hubiera imaginado pero el cumpleaños de Blogger no es cualquier cumpleaños y en lugar de invitarnos a gominolas nos invitaron a pastel.

Ironía aparte, porque luego dicen que siempre hablo mal de Blogger....El rebotao me decía "Gema hablando de la movida del avatar ¿podrías crear un post con los cambios a realizar para que se vea el avatar en los comentarios?

Una vez salimos de nuestro asombro empezamos a leer aquí y allá los cambios que debemos hacer para que el avatar se muestre. No es complicado... sólo algo retorcido si en nuestra plantilla hicimos grandes cambios.

Para activar la función de mostrar avatar debemos hacerlo en Configuración/Comentarios.

Los blogs como yo llamo "nuevitos" esos que les funciona el vista previa pueden ver su avatar antes de dar salida al comentario.

Hasta ahí todo genial, los comentarios se mostrarían con avatar siempre y cuando el autor del comentario tenga el perfil activado y una imagen de perfil. Los que no tienen el perfil activado, comentan como anónimo o añaden nombre/url no tienen imagen y los que tienen el perfil activado pero no añadieron imagen Blogger les añade un icono como este

Esa es la forma de mostrar avatar en comentarios pero ¿qué ocurre si no aparecen? me habría gustado que fuera un post donde todas las dudas tuvieran respuesta y todos los contratiempos solución, pero difícilmente será así porque  entregaron  las indicaciones pero se olvidaron de los problemas que podían surgir.

En algunos sitios como Blogger Buster , Chica Blogger, Dicas Blogger hablan de sustituir unas líneas de código y con ello conseguir que el avatar aparezca.

Ocurre, que al estar las plantillas personalizadas hay líneas de código que  no se muestran situadas en el mismo orden, hay otras distintas o fueron sustituidas por otras.

Tengo que recordar que la personalización que tengamos en los comentarios hasta ese momento se mantendrá sin alterarse, no hay que tocar nada de los estilos, únicamente añadir otros para el avatar como veremos más adelante.

Cualquier forma de hacerlo es buena si conseguimos el resultado que esperamos, yo decidí una vez más guiarme por J.Miur que dicho sea de paso es hasta hoy quien ha dado solución a todos los problemas surgidos y supongo que a otros muchos que vayan surgiendo. Con sus explicaciones 1 - 2 conseguimos tres cosas.

• Sustituir el código antiguo por el de una plantilla actual.

• Personalizar el avatar.

• Numerar los comentarios y diferenciar los pares de impares.
  

Antes de empezar guardaremos una copia de la plantilla, mejor descargar el archivo XML que una copia de texto. Para los ejemplos he buscado una plantilla bastante modificada por cierto. Su aspecto antes de añadir el avatar era el siguiente:

Nos dirigimos entonces a Plantilla Edicción de HTML y marcamos para expandir la plantilla.
Hay una línea que puede guiarnos hasta el punto donde debemos hacer ese cambio, es:

<dl id='comments-block'>

Esa línea es el inicio del código que vamos a reemplazar así que buscamos:

<dl id='comments-block'>

............

............

............

............

</div>

</b:loop>

</dl>

El espacio de los puntos suspensivos es el código que tenemos entre las etiquetas
<dl id='comments-block'> y </dl> 
Debemos sustituir todo ese código marcado en color azul  por el siguiente.

<dl expr:class='data:post.avatarIndentClass' id='comments-block'>
<!-- ponemos el contador a cero -->
<script type='text/javascript'>var contadorComentarios=0;</script>
<b:loop values='data:post.comments' var='comment'>
<!-- agregamos un bloque para darle un nombre único a cada comentario -->
<div class='' expr:id='data:comment.id'>
<a expr:name='&quot;comment-&quot; + data:comment.id'/>
<dt expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='data:comment.anchorName'>
<b:if cond='data:comment.favicon'>
<img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>
</b:if>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:blog.enabledCommentProfileImages'>
<data:comment.authorAvatarImage/>
</b:if>
<span class='autorcomentario'>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
</span>
<data:commentPostedByMsg/>
<!-- el código del contador -->
<span class='comentacontador'>
<a expr:href='"#comment-" + data:comment.id' title='Vinculo al comentario'>
<script type='text/javascript'>
contadorComentarios=contadorComentarios+1;
document.write(contadorComentarios)
</script>
</a>
</span>
</dt>
<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>
<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='&quot;#comment-&quot; + data:comment.id' title='comment permalink'><data:comment.timestamp/></a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
<!-- establecemos la clase del comentario -->
<script type='text/javascript'>ContarC(&#39;;<data:comment.id/>&#39;;)</script>
</div>
</b:loop>
</dl>

Aprovechando que estamos aquí quizás sea el momento de decir que la etiqueta &lt;data:commentPostedByMsg/&gt; es la que produce el texto tan popular "dijo..." podemos eliminarla si así lo deseamos o sustituirla por cualquier otro texto.

Si hacemos la prueba comprobaremos que los comentarios que tienen el perfil activado y con imagen muestran avatar, mientras que los anónimos y los que añaden nombre/url no muestran avatar.

Para solucionar ese problema de espacios vacíos sin avatar J.Miur nos explica de qué forma podemos añadir dos imágenes escogidas por nosotros, conseguiremos con ello que los comentarios anónimos, o con nombre/url tengan una misma imagen. Y una segunda imagen que se mostrará de fondo y la visualizaremos el tiempo que dure en cargar la página.

Algunos, tendrán problemas como por ejemplo este que os muestro:

No hay que hacer un drama, se solucionará al añadir los estilos.
Justo antes de <body>  (ojo, antes de <body> y no de </head> como hacemos normalmente)

<style type='text/css'>
#comments-block.avatar-comment-indent {
margin-left:0;
}

#comments-block .avatar-image-container {
float:left;
height:49px;
position:static;
width:49px;
margin-right:15px;
margin-top: 15px;
}

#comments-block .avatar-image-container img {
background:#333 url(url imagen de fondo) no-repeat 50% 50%;
border: 2px double #00CCFF;
display:block;
float:none;
min-height:45px;
min-width:45px;
padding:3px;
}

#comments-block .avatar-image-container.avatar-stock {
background:#333 url(url avatar anónimos y nombre/url) no-repeat 50% 50%;
border: 2px double #00CCFF;
}

#comments-block .avatar-image-container.avatar-stock img {
display:none;
}

img.delayLoad {
max-height: 45px;
max-width: 45px;
min-height: 45px;
min-width: 45px;
}

</style>

Con esos estilos del ejemplo al guardar los cambios veriamos algo así:

Si habéis leído las entrada 1 que hace referencia a las explicaciones de J.Miur os daréis cuenta que indica los pasos para numerar y diferenciar de color los comentarios pares de impares. Digo esto porque en el código que añadimos ya viene modificado el contenido del bloque y únicamente es necesario añadir los estilos y el script.

Pueden surgir más problemas así que paciencia.